
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_trip_demo/picture_filter/carouse_flow_delegate.dart';
import 'filter_item_style.dart';
import 'image_filter_selection.dart';

void main(){
  runApp(
    const MaterialApp(
      home: ImageFilterSelection(),
      debugShowCheckedModeBanner: false,
    )
  );
}

//不变的 过滤器选择器
@immutable
class FilterSelectorStyle extends StatefulWidget {

  final List<Color> filters;//过滤器颜色集合
  final void Function(Color selectedColor) onFilterChanged;//过滤器改变方法
  final EdgeInsets padding;//内边距

  const FilterSelectorStyle({
    Key? key,
    required this.filters,
    required this.onFilterChanged,
    this.padding = const EdgeInsets.symmetric(vertical: 24.0),//对称行 垂直24.0
  }) : super(key: key);

  @override
  _FilterSelectorStyleState createState() => _FilterSelectorStyleState();
}

class _FilterSelectorStyleState extends State<FilterSelectorStyle> {

  static const _filtersPerScreen = 5;//过滤器屏幕
  static const _viewportFractionPerItem = 1.0 / _filtersPerScreen;//查看端口分数每项

  late final PageController _controller;//页面控制器
  late int _page;//记录页面下标

  int get filterCount => widget.filters.length;//过滤器数量
  Color itemColor(int index) => widget.filters[index % filterCount];//每个颜色

  @override
  void initState() {

    _page = 0;
    _controller = PageController(
      initialPage: _page,//初始页面
      viewportFraction: _viewportFractionPerItem,//视图端口分数
    );
    _controller.addListener(_onPageChange);//控制器添加监听

    super.initState();
  }

  //页面改变方法
  void _onPageChange() {
    final page = (_controller.page ?? 0).round();//默认为0
    if(page != _page) {
      _page = page;//更新下标
      widget.onFilterChanged(widget.filters[page]);
    }
  }

  //过滤网过滤了
  void _onFilterTapped(index) {
    _controller.animateToPage(//动画页
      index,
      duration: const Duration(milliseconds: 450),
      curve: Curves.ease,//曲线-容易
    );
  }

  @override
  void dispose() {
    _controller.dispose();//控制器销毁 减少内存销毁
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollable(//可滚动的
      controller: _controller,
      axisDirection: AxisDirection.right,//轴(对称轴)的方向
      viewportBuilder: (context,viewportOffset) {
        return LayoutBuilder(
          builder: (context, constraints) {
           final itemSize = constraints.maxWidth * _viewportFractionPerItem;
           viewportOffset..applyViewportDimension(constraints.maxWidth)
             //应用内容维度
            ..applyContentDimensions(0.0, itemSize * (filterCount - 1));

           return Stack(
             alignment: Alignment.bottomCenter,//对齐方式--底部居中
             children: [
               _buildShadowGradient(itemSize),//阴影渐变
               _buildCarousel(//旋转木马
                 viewportOffset: viewportOffset,//查看端口抵消
                 itemSize: itemSize
               ),
               _buildSelectionRing(itemSize),//构建选择环
             ],
           );
          }
        );
      }
    );
  }

  //构建阴影渐变
  Widget _buildShadowGradient(double itemSize) {
    return SizedBox(
      height: itemSize * 2 + widget.padding.vertical,
      child: const DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.transparent,//透明色
              Colors.black,
            ],
          )
        ),
        child: SizedBox.expand(),
      ),
    );
  }

  //构建旋转木马
  Widget _buildCarousel(
    {required ViewportOffset viewportOffset,
      required double itemSize}
  ) {
    return Container(
      height: itemSize,
      margin: widget.padding,
      child: Flow(//跟随
        delegate: CarouseFlowDelegate(//代表 -- 使用一饮而尽流委托
          viewportOffset: viewportOffset,//查看端口销毁
          filtersPerScreen: _filtersPerScreen,//过滤器屏幕
        ),
        children: [
          for (int i = 0; i < filterCount; i++)
            FilterItemStyle(//使用过滤器item Style
              onFilterSelected: () => _onFilterTapped(i),
              selectedColor: itemColor(i),
            ),
        ],
      ),
    );

  }

  //构建选择环
  Widget _buildSelectionRing(double itemSize) {
    return IgnorePointer(//忽略指针
      child: Padding(
        padding: widget.padding,
        child: SizedBox(
          width: itemSize,
          height: itemSize,
          child: const DecoratedBox(
            decoration: BoxDecoration(
              shape: BoxShape.circle,//盒子样式--圆形
              border: Border.fromBorderSide(//从边境一侧
                BorderSide(width: 6.0, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }

}